<template>
  <div id="app">
    <nav>
      <router-link to="/profile">Profile</router-link>
      <template v-if="!session">
        | <router-link to="/register">Register</router-link> |
        <router-link to="/login">Login</router-link>
      </template>
      <template v-else>
        | <a href="#" @click.prevent="logout">Logout</a>
      </template>
    </nav>
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { auth } from './lib/auth-client';
import type { Session } from '@better-auth/client';
import { useRouter } from 'vue-router';

const session = ref<Session<typeof auth> | null>(null);
const router = useRouter();

const fetchSession = async () => {
  session.value = await auth.getSession();
};

onMounted(fetchSession);

const logout = async () => {
  await auth.signOut();
  session.value = null;
  alert('Logged out successfully!');
  router.push('/login');
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
